<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px;"
          />
        </div>
        <div class="head-container">
          <el-tree
            ref="tree"
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <el-row>
          <el-col :span="18">
            <el-form
              v-show="showSearch"
              ref="queryForm"
              :model="queryParams"
              :inline="true"
            >
              <el-form-item label="员工姓名:" prop="empName">
                <el-input
                  v-model="queryParams.empName"
                  placeholder="请输入"
                  clearable
                  style="width: 120px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="手机号码:" prop="phonenumber">
                <el-input
                  v-model="queryParams.phonenumber"
                  placeholder="请输入"
                  clearable
                  style="width: 120px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item label="状态:" prop="status">
                <el-select
                  v-model="queryParams.status"
                  placeholder="状态"
                  clearable
                  style="width: 100px"
                >
                  <el-option
                    v-for="dict in statusOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="small"
                  @click="handleQuery"
                  >搜索</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  size="small"
                  @click="resetQuery"
                  >重置</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-button
              type="text"
              size="small"
              icon="el-icon-plus"
              @click="handleAdd"
              >新增</el-button
            >
            <el-button
              type="text"
              size="small"
              icon="el-icon-upload2"
              @click="handleUpload"
              >批量导入</el-button
            >
            <el-button
              type="text"
              size="small"
              icon="el-icon-download"
              @click="handleDownload"
              >导出</el-button
            >
            <el-button
              type="text"
              size="small"
              icon="el-icon-refresh"
              @click="handleQuery"
              >刷新</el-button
            >
          </el-col>
        </el-row>

        <!-- <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="small"
              @click="handleAdd"
            >新增</el-button>
            <el-button
              type="primary"
              plain
              icon="el-icon-download"
              size="small"
              @click="handleDownload"
            >导出</el-button>
          </el-col>
          <right-toolbar :show-search.sync="showSearch" :columns="columns" @queryTable="getList" />
        </el-row> -->

        <el-table
          v-loading="loading"
          :data="userList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
          />
          <el-table-column
            label="员工工号"
            align="center"
            prop="empCode"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="员工姓名"
            align="center"
            prop="empName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="登录账号"
            align="center"
            width="100px"
            prop="username"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="部门"
            align="center"
            prop="deptName"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="岗位名称"
            align="center"
            prop="postNames"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="角色名称"
            align="center"
            prop="roleNames"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="手机号码"
            align="center"
            prop="phonenumber"
            width="120"
          />
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">{{
                scope.row.status === "0" ? "正常" : "停用"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[6].visible"
            label="创建日期"
            align="center"
            prop="createTime"
            width="120"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template v-if="scope.row.deptId !== '-1'" slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                >修改</el-button
              >
              <!-- <el-button
                size="mini"
                type="text"
                icon="el-icon-key"
                @click="handleResetPwd(scope.row)"
              >重置密码</el-button> -->
              <el-button
                v-if="scope.row.status === '0'"
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                >注销</el-button
              >
              <el-button
                v-if="scope.row.status === '1'"
                size="mini"
                type="text"
                icon="el-icon-success"
                @click="handleOnline(scope.row)"
                >启用</el-button
              >
              <el-dropdown
                size="mini"
                @command="command => handleCommand(command, scope.row)"
              >
                <span class="el-dropdown-link" style="font-size:12px;">
                  <i class="el-icon-d-arrow-right el-icon--right" />更多
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
                    >重置密码</el-dropdown-item
                  >
                  <!-- <el-dropdown-item
                    command="handleAuthRole"
                    icon="el-icon-circle-check"
                  >分配角色</el-dropdown-item> -->
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNumber"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="100%"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <div class="install-title">员工基本信息</div>
        <el-row :gutter="11">
          <el-col :span="5">
            <el-form-item label="员工姓名:" prop="empName">
              <el-input
                v-model="form.empName"
                placeholder="请输入姓名"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="性别:">
              <el-select
                v-model="form.sex"
                style="width:100%"
                placeholder="请选择"
              >
                <el-option
                  v-for="dict in sexOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="birthday" label="出生年月:">
              <el-date-picker
                style="width:100%"
                v-model="form.birthday"
                @change="getAge"
                value-format="yyyy-MM-dd"
                type="date"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="" label="年龄:">
              {{ this.teacherAge }}
              <span>岁</span>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item prop="avatar" label="本人照片:">
              <span slot="label">
                本人照片:
                <el-popover
                  placement="top-start"
                  title=""
                  width="320"
                  trigger="hover"
                  content="注：照片尺寸会裁剪为413px*626px（2寸）"
                >
                  <svg-icon
                    slot="reference"
                    icon-class="help"
                    style="font-size:16px"
                  />
                </el-popover>
              </span>
              <template v-if="!isPreview">
                <el-upload
                  class="upload-demo"
                  action=""
                  drag
                  :auto-upload="false"
                  :show-file-list="false"
                  :on-change="handleChangeUpload"
                >
                  <div class="upload-dragger">
                    <div class="el-upload__text">点击上传</div>
                  </div>
                </el-upload>
              </template>
              <div class="pre-box" v-else>
                <img :src="previewImg" alt="裁剪图片" style="width: 100px" />
                <el-upload
                  class="upload-demo"
                  action=""
                  :auto-upload="false"
                  :show-file-list="false"
                  :on-change="handleChangeUpload"
                >
                  <el-button type="primary" plain>更换图片</el-button>
                </el-upload>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="5">
            <el-form-item label="员工工号:" prop="empCode">
              <el-input
                v-model="form.empCode"
                placeholder="请输入员工工号"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="个人邮箱:" prop="email">
              <el-input
                v-model="form.email"
                placeholder="请输入邮箱"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="民族:" prop="nation">
              <el-select
                v-model="form.nation"
                style="width:100%"
                placeholder="请选择民族"
              >
                <el-option
                  v-for="dict in nationOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item prop="marriage" label="婚姻状况:">
              <el-select
                v-model="form.marriage"
                style="width:100%"
                placeholder="请选择婚姻状况"
              >
                <el-option
                  v-for="dict in marriageOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="籍贯:" prop="ancestral" label-width="150px">
              <el-input
                v-model="form.ancestral"
                placeholder="请输入籍贯"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="professionalTitle" label="职称:">
              <el-select
                v-model="form.professionalTitle"
                style="width:100%"
                placeholder="请选择职称"
              >
                <el-option
                  v-for="dict in professionalTitleOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="学历:" prop="education">
              <el-input
                v-model="form.education"
                placeholder="请输入学历"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="毕业学校:" prop="school">
              <el-input
                v-model="form.school"
                placeholder="请输入毕业学校"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="所学专业:" prop="major">
              <el-input
                v-model="form.major"
                placeholder="请输入所学专业"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label="本人联系地址:"
              prop="address"
              label-width="150px"
            >
              <el-input
                v-model="form.address"
                placeholder="请输入本人联系地址"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="手机号码:" prop="phonenumber">
              <el-input
                v-model="form.phonenumber"
                placeholder="请输入手机号码"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="紧急联系人姓名:" prop="contacts">
              <el-input
                v-model="form.contacts"
                placeholder="请输入紧急联系人姓名"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="紧急联系人电话:" prop="contactsPhone">
              <el-input
                v-model="form.contactsPhone"
                placeholder="请输入紧急联系人电话"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item prop="entryDate" label="入职本公司时间:">
              <el-date-picker
                style="width:100%"
                v-model="form.entryDate"
                value-format="yyyy-MM-dd"
                type="date"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              prop="startDate"
              label="开始工作时间:"
              label-width="150px"
            >
              <el-date-picker
                style="width:100%"
                v-model="form.startDate"
                value-format="yyyy-MM-dd"
                type="date"
                @change="getAgeData"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="" label="工作年限:">
              {{ this.teacherAgeData }}
              <span>年</span>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="身份证号码:" prop="idNumber">
              <el-input
                v-model="form.idNumber"
                placeholder="请输入身份证号码"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="学习经历:" prop="learning">
              <el-input
                type="textarea"
                v-model="form.learning"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="培训经历:" prop="training">
              <el-input
                type="textarea"
                v-model="form.training"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item
              label="主要成员及社会关系:"
              prop="socialRelations"
              label-width="150px"
            >
              <el-input
                type="textarea"
                v-model="form.socialRelations"
                style="width:100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="11">
          <div class="install-title">员工平台设置</div>
          <el-col :span="5">
            <el-form-item>
              <span slot="label">
                岗位:
                <el-popover
                  placement="top-start"
                  title=""
                  width="400"
                  trigger="hover"
                  content="岗位是员工在公司里的内部职称，一个员工对应一个岗位，岗位名称可以任意命名，员工岗位与权限没有任何关联。"
                >
                  <svg-icon
                    slot="reference"
                    icon-class="help"
                    style="font-size:16px"
                  />
                </el-popover>
              </span>
              <el-select
                v-model="postId"
                placeholder="请选择"
                @change="getPostInfo"
                style="width:100%"
              >
                <el-option
                  v-for="item in postOptions"
                  :key="item.postId"
                  :label="item.postName"
                  :value="item.postId"
                  :disabled="item.status == 1"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="roleIds">
              <span slot="label">
                角色:
                <el-popover
                  placement="top-start"
                  title=""
                  width="300"
                  trigger="hover"
                  content="角色是平台内设定的统一固定称谓，一个员工可以对应多个角色，
                  也就是说可以同时拥有多个角色的权限，以解决某些员工身兼数职的问题。
                  角色名称是系统默认固定的，但是角色的数据权限和菜单权限管理员可以进行更改，
                  请根据需要谨慎更改。平台后期可能新增角色，但不会对现有角色进行修改，
                  若点击恢复默认权限，则会恢复到平台给予当前角色的默认权限。"
                >
                  <svg-icon
                    slot="reference"
                    icon-class="help"
                    style="font-size:16px"
                  />
                </el-popover>
              </span>
              <el-select
                v-model="form.roleIds"
                multiple
                placeholder="请选择"
                style="width:100%"
              >
                <el-option
                  v-for="item in roleOptions"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                  :disabled="item.status == 1"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="归属部门:" prop="deptId">
              <treeselect
                style="width:100%"
                v-model="form.deptId"
                :options="deptOptions"
                :show-count="true"
                placeholder="请选择归属部门"
              />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="备注:">
              <el-input
                style="width:100%"
                v-model="form.remark"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div style="display:flex;">
          <div style="width:50%">
            <el-row :gutter="5">
              <div class="install-title">授权使用仪器</div>
              <el-col :span="8">
                <el-form-item prop="deviceIds" label="授权使用仪器:">
                  <div style="display:flex;width:400%">
                    <el-select
                      v-model="this.selectionData"
                      multiple
                      placeholder="请选择"
                      style="width:340px"
                    >
                      <el-option
                        v-for="item in selectionData"
                        :key="item"
                        :label="item"
                        :value="item"
                      />
                    </el-select>
                    <el-button
                      style="padding-right:11px"
                      slot="suffix"
                      @click="Claiminbulk"
                      >选择仪器</el-button
                    >
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div style="padding-left:20px;width:50%">
            <el-row :gutter="5">
              <div class="install-title">
                人员能力管理信息
              </div>
              <el-col :span="8">
                <el-form-item prop="workLicense" label="上岗证:">
                  <userAvatar v-on:myEvent="workLicense" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-row :gutter="15">
          <div class="install-title">证书及材料上传</div>
          <el-col :span="4">
            <el-form-item prop="titleCertificate" label="职称证书:">
              <userAvatar v-on:myEvent="titleCertificate" />
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item prop="learningPath" label="教育经历:">
              <userAvatar v-on:myEvent="learningPath" />
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item prop="diploma" label="学历/学位证书:">
              <userAvatar v-on:myEvent="diploma" />
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item prop="contract" label="劳动合同:">
              <userAvatar v-on:myEvent="contract" />
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item prop="assessment" label="年度核查登记表:">
              <userAvatar v-on:myEvent="assessment" />
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item prop="researchProject" label="项目材料:">
              <userAvatar v-on:myEvent="researchProject" />
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item prop="patent" label="论文/专利材料:">
              <userAvatar v-on:myEvent="patent" />
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item prop="workCertificate" label="工作证明:">
              <userAvatar v-on:myEvent="workCertificate" />
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item prop="ability" label="能力证明材料:">
              <userAvatar v-on:myEvent="ability" />
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item
              prop="result"
              label="确保结果有效材料:"
              label-width="130px"
            >
              <userAvatar v-on:myEvent="result" />
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item prop="cet" label="英语等级证书:">
              <userAvatar v-on:myEvent="cet" />
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item prop="ncre" label="计算机等级证书:">
              <userAvatar v-on:myEvent="ncre" />
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item
              style="margin-left:-130px;text-align: center;"
              prop="ncre"
            >
              <div
                v-for="item in dynamicForm.counter"
                :key="item"
                :label="item"
                :value="item"
                style="display:flex;"
              >
                <el-input
                  style="width:100px"
                  v-model="item.xxName"
                  placeholder="请输入证书"
                  autocomplete="off"
                ></el-input>
                :
                <userAvatar v-on:myEvent="ncre" />
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item
              prop="skills"
              label="其他技能证书:"
              :visible.sync="dynamicFormVisible"
            >
              <el-form :model="dynamicForm">
                <div style="margin-right: 185px;">
                  <el-form-item style="text-align: center;">
                    <el-button
                      type="primary"
                      @click="addInput"
                      icon="el-icon-plus"
                    ></el-button>
                  </el-form-item>
                </div>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveForm()">确 定</el-button>
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- vueCropper 剪裁图片实现-->
    <el-dialog
      title="图片剪裁"
      :visible.sync="dialogVisible"
      class="crop-dialog"
      append-to-body
    >
      <div class="cropper-content">
        <div class="cropper" style="text-align: center">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :full="option.full"
            accept=".jpg,.jpeg,.png"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            :centerBox="option.centerBox"
            :infoTrue="option.infoTrue"
            :fixedBox="option.fixedBox"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            @cropMoving="cropMoving"
          />
        </div>
      </div>
      <div class="action-box">
        <el-upload
          class="upload-demo"
          action=""
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleChangeUpload"
        >
          <el-button type="primary" plain>更换图片</el-button>
        </el-upload>
        <el-button type="primary" plain @click="clearImgHandle"
          >清除图片</el-button
        >
        <el-button type="primary" plain @click="rotateLeftHandle"
          >左旋转</el-button
        >
        <el-button type="primary" plain @click="rotateRightHandle"
          >右旋转</el-button
        >
        <el-button type="primary" plain @click="changeScaleHandle(1)"
          >放大</el-button
        >
        <el-button type="primary" plain @click="changeScaleHandle(-1)"
          >缩小</el-button
        >
        <!-- <el-button type="primary" plain @click="downloadHandle('blob')"
          >下载</el-button
        > -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="finish" :loading="loading"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="批量导入员工"
      :visible.sync="uploadVisible"
      append-to-body
    >
      <div class="block">
        <el-timeline>
          <el-timeline-item size="large">
            <span slot="dot" class="time-dot">
              1
            </span>
            <el-row>
              <el-col :span="24">
                下载模板，批量填写员工信息
              </el-col>
            </el-row>
            <el-row style="padding-top:10px;">
              <el-col :span="24">
                <el-button size="mini" type="primary" @click="downloadTem()"
                  >模板下载</el-button
                >
              </el-col>
            </el-row>
          </el-timeline-item>
          <el-timeline-item size="large">
            <span slot="dot" class="time-dot">
              2
            </span>
            <el-row>
              <el-col :span="24">
                上传填写好的员工信息表格
              </el-col>
            </el-row>
            <el-row style="padding-top:10px;">
              <el-col :span="24">
                <el-upload
                  class="upload-demo"
                  action="/api/dataImport/uploadEmployee"
                  :on-change="uploadChange"
                  :file-list="excelFileList"
                  accept=".xlsx,.xls"
                  :limit="1"
                  style="width: 300px;"
                >
                  <el-button size="mini" type="primary">点击上传</el-button>
                  <!-- <div class="el-upload__text"><em>点击上传</em></div> -->
                  <div slot="tip" class="el-upload__tip" style="color:red;">
                    您只能上传.xlsx,.xls格式的文件
                  </div>
                </el-upload>
              </el-col>
            </el-row>
          </el-timeline-item>
        </el-timeline>
        <el-row>
          <el-col :span="24" style="">
            <span style="color:red; font-size: 13px"
              >备注：批量导入员工功能，只会将上传的员工信息列表内的员工新增到系统内，不对原有员工信息做任何替换或修改</span
            >
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <el-dialog
      title="请选择仪器"
      :visible.sync="Batchpopups"
      center
      top="5vh"
      width="1400px"
    >
      <el-form :model="searchForm" ref="searchForm" label-width="110px">
        <el-row :gutter="12">
          <el-col :span="30">
            <el-form :model="searchForm" inline @submit.native.prevent>
              <div style="margin: 5px 5px 5px 800px">
                <el-form-item>
                  <el-input
                    v-model="searchForm.fuzzy"
                    style="width: 250px"
                    placeholder="仪器名称/仪器编号/仪器型号"
                    clearable
                    @keyup.enter.native="handleSearch"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button
                    type="primary"
                    class="iconfont icon-chaxun1"
                    @click="handleSearch"
                  >
                    查询</el-button
                  >
                </el-form-item>
              </div>
            </el-form>
          </el-col>

          <el-col :span="8">
            <el-tree
              :data="data1"
              :props="defaultPropsa"
              @node-click="handleNodeData"
            ></el-tree>
          </el-col>

          <el-col :span="15">
            <el-table
              :model="mainAuxiliary"
              border
              stripe
              max-height="350"
              tooltip-effect="dark"
              :data="mainAuxiliary"
              highlight-current-row
              :header-cell-style="{ background: '#ECF3FC' }"
              style="width: 100%"
              ref="mainAuxiliary"
              @select="selectionCloumn"
              @selection-change="handleSelection"
            >
              <el-table-column
                type="selection"
                fixed="left"
                width="55"
                align="center"
              />
              <el-table-column
                type="index"
                width="50"
                label="序号"
                fixed="left"
                align="center"
              />
              <el-table-column
                prop="isMaster"
                label="仪器属性"
                width="100px"
                align="center"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.isMaster == '1'">主仪器</span>
                  <span v-if="scope.row.isMaster == '2'">辅助仪器</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="仪器名称"
                width="110px"
                align="center"
              />
              <el-table-column
                prop="number"
                label="仪器编号"
                width="185px"
                align="center"
              />

              <el-table-column
                prop="manufacturer"
                label="仪器品牌"
                width="110px"
                align="center"
              />
              <el-table-column
                prop="model"
                label="仪器型号"
                width="110px"
                align="center"
              />

              <el-table-column
                prop="userName"
                label="授权使用人"
                width="117px"
                align="center"
              >
              </el-table-column>
            </el-table>

            <div class="install-title" style="margin: 15px 0 0 0">已选仪器</div>
            <el-table
              :model="searchForm"
              border
              stripe
              max-height="350"
              tooltip-effect="dark"
              :data="tableData1"
              highlight-current-row
              :header-cell-style="{ background: '#ECF3FC' }"
              style="width: 100%"
              ref="tableData1"
            >
              <el-table-column
                type="index"
                width="50"
                label="序号"
                fixed="left"
                align="center"
              />
              <el-table-column
                prop="isMaster"
                label="仪器属性"
                width="100px"
                align="center"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.isMaster == '1'">主仪器</span>
                  <span v-if="scope.row.isMaster == '2'">辅助仪器</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="仪器名称"
                width="110px"
                align="center"
              />
              <el-table-column
                prop="number"
                label="仪器编号"
                width="170px"
                align="center"
              />
              <el-table-column
                prop="manufacturer"
                label="仪器品牌"
                width="100px"
                align="center"
              />
              <el-table-column
                prop="model"
                label="仪器型号"
                width="100px"
                align="center"
              />
              <el-table-column
                prop="userName"
                label="授权使用人"
                width="120px"
                align="center"
              >
              </el-table-column>

              <el-table-column
                fixed="right"
                align="center"
                label="操作"
                width="80px"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click.native.prevent="deleteRow(scope.$index, tableData1)"
                    size="small"
                  >
                    移出</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Batchpopups = false">取消</el-button>
        <el-button type="primary" @click="associatedInstruments"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listUser,
  getUserInfo,
  addUser,
  updateUser,
  resetOriganPassword,
  changeUserStatus,
  invalidUserByUserId,
  onlineUserByUserId,
  uploadFilePath
} from "@/api/system/user";
import * as deptServer from "@/api/dept";
import { selectPostAll } from "@/api/system/post";
import { getAllRole } from "@/api/system/role";
import { VueCropper } from "vue-cropper";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import userAvatar from "./components/user.vue";
import * as List from "@/api/List";

export default {
  name: "Profile",
  components: { VueCropper, Treeselect, userAvatar },
  data() {
    return {
      URL1: "https://www.huancelian.com/certificate/",
      dialogVisible: false,
      isPreview: false,
      previewImg: "", // 预览图片地址
      option: {
        img: "", // 裁剪图片的地址
        info: false, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "png", // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        canMoveBox: false, // 截图框能否拖动
        autoCropWidth: 413, // 默认生成截图框宽度
        autoCropHeight: 626, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: false, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        enlarge: 2, // 图片根据截图框输出比例倍数
        full: false, // 是否输出原图比例的截图
        original: true, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        maxImgSize: 1000 //限制图片最大宽度和高度
      },
      // 遮罩层
      loading: false,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: undefined,
      // 是否显示弹出层
      open: false,
      // 部门名称
      deptName: undefined,
      // 默认密码
      initPassword: undefined,
      // 日期范围
      dateRange: [],
      fileList: [],
      file: "",
      // 状态数据字典
      statusOptions: [
        { dictLabel: "正常", dictValue: "0" },
        { dictLabel: "停用", dictValue: "1" }
      ],
      // 性别状态字典
      sexOptions: [
        { dictLabel: "男", dictValue: "0" },
        { dictLabel: "女", dictValue: "1" }
      ],
      // 民族信息
      nationOptions: [
        { dictLabel: "汉族", dictValue: "汉族" },
        { dictLabel: "蒙古族", dictValue: "蒙古族" },
        { dictLabel: "回族", dictValue: "回族" },
        { dictLabel: "藏族", dictValue: "藏族" },
        { dictLabel: "维吾尔族", dictValue: "维吾尔族" },
        { dictLabel: "苗族", dictValue: "苗族" },
        { dictLabel: "彝族", dictValue: "彝族" },
        { dictLabel: "壮族", dictValue: "壮族" },
        { dictLabel: "布依族", dictValue: "布依族" },
        { dictLabel: "朝鲜族", dictValue: "朝鲜族" },
        { dictLabel: "满族", dictValue: "满族" },
        { dictLabel: "侗族", dictValue: "侗族" },
        { dictLabel: "瑶族", dictValue: "瑶族" },
        { dictLabel: "白族", dictValue: "白族" },
        { dictLabel: "土家族", dictValue: "土家族" },
        { dictLabel: "哈尼族", dictValue: "哈尼族" },
        { dictLabel: "哈萨克族", dictValue: "哈萨克族" },
        { dictLabel: "傣族", dictValue: "傣族" },
        { dictLabel: "黎族", dictValue: "黎族" },
        { dictLabel: "僳僳族", dictValue: "僳僳族" },
        { dictLabel: "佤族", dictValue: "佤族" },
        { dictLabel: "畲族", dictValue: "畲族" },
        { dictLabel: "高山族", dictValue: "高山族" },
        { dictLabel: "拉祜族", dictValue: "拉祜族" },
        { dictLabel: "水族", dictValue: "水族" },
        { dictLabel: "东乡族", dictValue: "东乡族" },
        { dictLabel: "纳西族", dictValue: "纳西族" },
        { dictLabel: "景颇族", dictValue: "景颇族" },
        { dictLabel: "柯尔克孜族", dictValue: "柯尔克孜族" },
        { dictLabel: "土族", dictValue: "土族" },
        { dictLabel: "达斡尔族", dictValue: "达斡尔族" },
        { dictLabel: "仫佬族", dictValue: "仫佬族" },
        { dictLabel: "羌族", dictValue: "羌族" },
        { dictLabel: "布朗族", dictValue: "布朗族" },
        { dictLabel: "撒拉族", dictValue: "撒拉族" },
        { dictLabel: "毛南族", dictValue: "毛南族" },
        { dictLabel: "仡佬族", dictValue: "仡佬族" },
        { dictLabel: "锡伯族", dictValue: "锡伯族" },
        { dictLabel: "阿昌族", dictValue: "阿昌族" },
        { dictLabel: "普米族", dictValue: "普米族" },
        { dictLabel: "塔吉克族", dictValue: "塔吉克族" },
        { dictLabel: "怒族", dictValue: "怒族" },
        { dictLabel: "乌孜别克族", dictValue: "乌孜别克族" },
        { dictLabel: "俄罗斯族", dictValue: "俄罗斯族" },
        { dictLabel: "鄂温克族", dictValue: "鄂温克族" },
        { dictLabel: "德昂族", dictValue: "德昂族" },
        { dictLabel: "保安族", dictValue: "保安族" },
        { dictLabel: "裕固族", dictValue: "裕固族" },
        { dictLabel: "京族", dictValue: "京族" },
        { dictLabel: "塔塔尔族", dictValue: "塔塔尔族" },
        { dictLabel: "独龙族", dictValue: "独龙族" },
        { dictLabel: "鄂伦春族", dictValue: "鄂伦春族" },
        { dictLabel: "赫哲族", dictValue: "赫哲族" },
        { dictLabel: "门巴族", dictValue: "门巴族" },
        { dictLabel: "珞巴族", dictValue: "珞巴族" },
        { dictLabel: "基诺族", dictValue: "基诺族" }
      ],
      // 婚姻状况
      marriageOptions: [
        { dictLabel: "未婚", dictValue: "0" },
        { dictLabel: "已婚", dictValue: "1" }
      ],
      // 职称
      professionalTitleOptions: [
        { dictLabel: "助理工程师", dictValue: "助理工程师" },
        { dictLabel: "工程师", dictValue: "工程师" },
        { dictLabel: "副高级工程师", dictValue: "副高级工程师" },
        { dictLabel: "正高级工程师", dictValue: "正高级工程师" }
      ],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      // 表单参数
      form: {
        idNumber: "",
        ability: "",
        address: "",
        ancestral: "",
        appRoles: [],
        assessment: "",
        avatar: "",
        cet: "",
        contacts: "",
        contactsPhone: "",
        contract: "",
        deptId: null,
        deviceIds: [],
        diploma: "",
        education: "",
        email: "",
        empCode: "",
        empName: "",
        entryDate: "",
        isAppLogin: "",
        learning: "",
        learningPath: "",
        major: "",
        marriage: "",
        nation: "",
        ncre: "",
        patent: "",
        phonenumber: "",
        postIds: [],
        professionalTitle: "",
        remark: "",
        researchProject: "",
        result: "",
        school: "",
        sex: "",
        socialRelations: "",
        birthday: "",
        startDate: "",
        status: "",
        titleCertificate: "",
        training: "",
        workCertificate: "",
        workLicense: "",
        devices: [],
        roleIds: []
      },
      selectionData: [],
      teacherAge: "",
      teacherAgeData: "",
      defaultProps: {
        children: "children",
        label: "label",
        id: "id"
      },
      data1: [
        {
          label: "现场采样仪器",
          children: [
            {
              label: "水"
            },
            {
              label: "气"
            },
            {
              label: "噪声"
            },
            {
              label: "土壤、底泥、固废、污泥和生活垃圾"
            }
          ]
        },
        {
          label: "现场检测仪器",
          children: [
            {
              label: "水"
            },
            {
              label: "气"
            },
            {
              label: "噪声"
            },
            {
              label: "土壤、底泥、固废、污泥和生活垃圾"
            }
          ]
        },
        {
          label: "实验室仪器",
          children: [
            {
              label: "样品制备 "
            },
            {
              label: "小型分析仪器"
            },
            {
              label: "色谱仪"
            },
            {
              label: "光谱仪"
            },
            {
              label: "质谱仪"
            }
          ]
        },
        {
          label: "校准仪器",
          children: []
        }
      ],
      defaultPropsa: {
        children: "children",
        label: "label"
      },
      tableData1: [],
      mainAuxiliary: [], //选择关联仪器数据
      Batchpopups: false,
      Claimchanges: "",
      // 查询参数
      queryParams: {
        pageNumber: 1,
        pageSize: 10,
        empName: "",
        phonenumber: "",
        deptId: undefined
      },
      dataAppOptions: [
        {
          value: "1",
          label: "采样组长"
        },
        {
          value: "2",
          label: "采样员"
        }
        // {
        //   value: '3',
        //   label: '样品管理员'
        // },
        // {
        //   value: '4',
        //   label: '检测员'
        // }
      ],
      postId: "",
      // 列信息
      columns: [
        { key: 0, label: `用户编号`, visible: true },
        { key: 1, label: `用户名称`, visible: true },
        { key: 2, label: `用户账号`, visible: true },
        { key: 3, label: `部门`, visible: true },
        { key: 4, label: `手机号码`, visible: true },
        { key: 5, label: `状态`, visible: true },
        { key: 6, label: `创建时间`, visible: true }
      ],
      // 表单校验
      rules: {
        empCode: [{ required: true, message: "工号不能为空", trigger: "blur" }],
        empName: [
          { required: true, message: "真实名称不能为空", trigger: "blur" }
        ],
        deptId: [
          { required: true, message: "归属部门不能为空", trigger: "blur" }
        ],
        email: [
          {
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        roleIds: [{ required: true, message: "角色不能为空", trigger: "blur" }]
        // phonenumber: [
        //   { required: true, message: "手机号码不能为空", trigger: "blur" },
        //   {
        //     pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        //     message: "请输入正确的手机号码",
        //     trigger: "blur"
        //   }
        // ]
      },
      excelFileList: [],
      uploadVisible: false,
      disableda: false,
      searchForm: {
        pageNumber: 1,
        pageSize: 10,
        state: ""
      },
      dynamicFormVisible: true,
      dynamicForm: {
        counter: []
      }
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getList();
    this.getTreeselect();
    this.getPostAndRoleList();
    // this.getDicts('sys_normal_disable').then(response => {
    //   this.statusOptions = response.data
    // })
    // this.getDicts('sys_user_sex').then(response => {
    //   this.sexOptions = response.data
    // })
    // this.getConfigKey('sys.user.initPassword').then(response => {
    //   this.initPassword = response.msg
    // })
  },
  methods: {
    // 上传按钮 限制图片大小和类型
    handleChangeUpload(file, fileList) {
      this.file = file.raw.name;
      const isJPG =
        file.raw.type === "image/jpeg" || file.raw.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        return false;
      }
      // 上传成功后将图片地址赋值给裁剪框显示图片
      this.$nextTick(async () => {
        // base64方式
        // this.option.img = await fileByBase64(file.raw)
        this.option.img = URL.createObjectURL(file.raw);
        this.loading = false;
        this.dialogVisible = true;
      });
    },
    // 放大/缩小
    changeScaleHandle(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    // 左旋转
    rotateLeftHandle() {
      this.$refs.cropper.rotateLeft();
    },
    // 右旋转
    rotateRightHandle() {
      this.$refs.cropper.rotateRight();
    },
    // 下载
    // downloadHandle(type) {
    //   let aLink = document.createElement("a");
    //   aLink.download = "author-img";
    //   if (type === "blob") {
    //     this.$refs.cropper.getCropBlob(data => {
    //       aLink.href = URL.createObjectURL(data);
    //       aLink.click();
    //     });
    //   } else {
    //     this.$refs.cropper.getCropData(data => {
    //       aLink.href = data;
    //       aLink.click();
    //     });
    //   }
    // },
    // 清理图片
    clearImgHandle() {
      this.option.img = "";
    },
    // 截图框移动回调函数
    cropMoving(data) {
      // 截图框的左上角 x，y和右下角坐标x，y
      // let cropAxis = [data.axis.x1, data.axis.y1, data.axis.x2, data.axis.y2]
      // console.log(cropAxis)
    },
    finish() {
      // 获取截图的 blob 数据
      this.$refs.cropper.getCropBlob(blob => {
        this.loading = true;
        this.dialogVisible = false;
        this.previewImg = URL.createObjectURL(blob);
        this.isPreview = true;
      });

      // 获取截图的 base64 数据
      this.$refs.cropper.getCropData(data => {
        console.log(data);
        //调用
        var file = this.dataURLtoFile(data, this.file);
        console.log(file);
        const formData = new FormData();
        formData.append("file", file);
        console.log(formData);
        uploadFilePath(formData).then(response => {
          if (response.code === 200) {
            this.msgSuccess("上传成功");
            console.log(response.result);
            let url = response.result;
            let urlStr = url.lastIndexOf("/");
            let fileName = url.substr(urlStr + 1);
            console.log(fileName);
            this.form.avatar = fileName;
            console.log(this.form.avatar);
          }
        });
      });
    },
    //将base64转换为文件
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },

    addInput() {
      this.dynamicForm.counter.push({
        xxName: "",
        zyName: "",
        azCount: "",
        azDate: ""
      });
    },
    delInput(index) {
      this.dynamicForm.counter.splice(index, 1);
    },
    saveForm() {
      console.log(this.dynamicForm.counter);
    },

    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.queryParams)
        .then(response => {
          this.userList = response.result.records;
          this.total = response.result.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      this.deptOptions = [];
      deptServer.treeselect().then(res => {
        this.deptOptions = this.doProcessDept(res.result) || [];
      });
    },
    doProcessDept(depts) {
      const res = [];
      depts.forEach(e => {
        const tmp = { ...e };
        if (tmp.children && tmp.children.length > 0) {
          tmp.children = this.doProcessDept(tmp.children);
        } else {
          tmp.children = undefined;
        }
        res.push(tmp);
      });
      return res;
    },
    // treeselect().then(response => {
    //   this.deptOptions = response.data
    // })
    // },
    // 筛选节点
    getPostInfo() {
      this.form.postIds = [];
      this.form.postIds.push(this.postId);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      if (data.parentId !== "0") {
        this.queryParams.deptId = data.id;
      } else {
        this.queryParams.deptId = "";
      }
      this.getList();
    },
    // 用户状态修改
    handleStatusChange(row) {
      const text = row.status === "0" ? "启用" : "停用";
      this.$confirm(
        '确认要"' + text + '""' + row.userName + '"用户吗?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(function() {
          return changeUserStatus(row.userId, row.status);
        })
        .then(() => {
          this.msgSuccess(text + "成功");
        })
        .catch(function() {
          row.status = row.status === "0" ? "1" : "0";
        });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    //选择关联主要仪器
    Claiminbulk() {
      this.Batchpopups = true;
      this.customerDialogStatus = "edit";
      this.searchForm.isMaster = 1;
      List.getdeviceApplyList(this.searchForm).then(res => {
        console.log(res);
        if (res.code === 200) {
          this.mainAuxiliary = res.result.records;
          this.total = res.result.total;
          console.log(this.mainAuxiliary);
        }
      });
    },
    selectionCloumn(e) {
      // console.log(e);
      this.tableData1 = e;
    },
    associatedInstruments() {
      // console.log(222);
      this.Claimchanges.deviceIds = this.Selection;
      console.log(this.Claimchanges.deviceIds);
      this.Batchpopups = false;
    },
    associatedInstruments() {
      // console.log(222);
      this.form.deviceIds = this.Selection;
      console.log(this.form.deviceIds);
      this.Batchpopups = false;
    },
    // 表单重置
    reset() {
      this.form = {
        idNumber: "",
        ability: "",
        address: "",
        ancestral: "",
        appRoles: [],
        assessment: "",
        avatar: "",
        cet: "",
        contacts: "",
        contactsPhone: "",
        contract: "",
        deptId: null,
        deviceIds: [],
        diploma: "",
        education: "",
        email: "",
        empCode: "",
        empName: "",
        entryDate: "",
        isAppLogin: "",
        learning: "",
        learningPath: "",
        major: "",
        marriage: "",
        nation: "",
        ncre: "",
        patent: "",
        phonenumber: "",
        postIds: [],
        professionalTitle: "",
        remark: "",
        researchProject: "",
        result: "",
        school: "",
        sex: "",
        socialRelations: "",
        birthday: "",
        startDate: "",
        status: "",
        titleCertificate: "",
        training: "",
        workCertificate: "",
        workLicense: "",
        devices: [],
        roleIds: []
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNumber = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleResetPwd":
          this.handleResetPwd(row);
          break;
        case "handleAuthRole":
          this.handleAuthRole(row);
          break;
        default:
          break;
      }
    },
    //      判断用户的年龄
    getAge() {
      console.log(2563);
      if (this.form.birthday != null && this.form.birthday !== "") {
        let birthdays = new Date(this.form.birthday.replace(/-/g, "/"));
        let d = new Date();
        let age =
          d.getFullYear() -
          birthdays.getFullYear() -
          (d.getMonth() < birthdays.getMonth() ||
          (d.getMonth() == birthdays.getMonth() &&
            d.getDate() < birthdays.getDate())
            ? 1
            : 0);
        this.teacherAge = age;
      } else {
        this.teacherAge = null;
      }
    },
    //判断用户的工作年龄
    getAgeData() {
      console.log(2563);
      if (this.form.startDate != null && this.form.startDate !== "") {
        let birthdays = new Date(this.form.startDate.replace(/-/g, "/"));
        let d = new Date();
        let age =
          d.getFullYear() -
          birthdays.getFullYear() -
          (d.getMonth() < birthdays.getMonth() ||
          (d.getMonth() == birthdays.getMonth() &&
            d.getDate() < birthdays.getDate())
            ? 1
            : 0);
        this.teacherAgeData = age;
      } else {
        this.teacherAgeData = null;
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加员工信息";
    },
    getPostAndRoleList() {
      selectPostAll().then(res => {
        this.postOptions = res.result || [];
      });
      getAllRole().then(res => {
        this.roleOptions = res.result || [];
      });
    },
    // 子传父
    workLicense: function(value) {
      // childValue就是子组件传过来的值
      console.log(value);
      this.form.workLicense = value;
    },
    titleCertificate: function(value) {
      // childValue就是子组件传过来的值
      console.log(value);
      this.form.titleCertificate = value;
    },
    learningPath: function(value) {
      // childValue就是子组件传过来的值
      console.log(value);
      this.form.learningPath = value;
    },
    diploma: function(value) {
      // childValue就是子组件传过来的值
      console.log(value);
      this.form.diploma = value;
    },
    contract: function(value) {
      // childValue就是子组件传过来的值
      console.log(value);
      this.form.contract = value;
    },
    assessment: function(value) {
      // childValue就是子组件传过来的值
      console.log(value);
      this.form.assessment = value;
    },
    researchProject: function(value) {
      // childValue就是子组件传过来的值
      console.log(value);
      this.form.researchProject = value;
    },
    patent: function(value) {
      // childValue就是子组件传过来的值
      console.log(value);
      this.form.patent = value;
    },
    workCertificate: function(value) {
      // childValue就是子组件传过来的值
      console.log(value);
      this.form.workCertificate = value;
    },
    ability: function(value) {
      // childValue就是子组件传过来的值
      console.log(value);
      this.form.ability = value;
    },
    result: function(value) {
      // childValue就是子组件传过来的值
      console.log(value);
      this.form.result = value;
    },
    cet: function(value) {
      // childValue就是子组件传过来的值
      console.log(value);
      this.form.cet = value;
    },
    ncre: function(value) {
      // childValue就是子组件传过来的值
      console.log(value);
      this.form.ncre = value;
    },
    skills: function(value) {
      // childValue就是子组件传过来的值
      console.log(value);
      this.form.skills = value;
    },
    // 获取列表勾中id
    handleSelection(val) {
      console.log(val);
      var arr = [];
      var arrData = [];
      for (var item of val) {
        // console.log(item.id);
        arr.push(item.id);
        arrData.push(item.name);
        // console.log(arr + []);
        this.Selection = arr;
        console.log(this.Selection);

        this.selectionData = arrData;
        console.log(this.selectionData);
      }
    },
    handleSearch() {
      // console.log(123);
      api.updateById(this.searchForm).then(res => {
        if (res.code === 200) {
          console.log(111, res);
          this.tableData = res.result.records;
          console.log(this.tableData);
          this.total = res.result.total;
        }
      });
    },
    handleNodeData(data) {
      console.log(data);
      if (data.label == "现场采样仪器") {
        this.searchForm.type = 1;
      }
      if (data.label == "现场检测仪器") {
        this.searchForm.type = 2;
      }
      if (data.label == "实验室仪器") {
        this.searchForm.type = 3;
      }
      if (data.label == "校准仪器") {
        this.searchForm.type = 4;
      }
      if (data.label == "水") {
        this.searchForm.classType = 1;
      }
      if (data.label == "气") {
        this.searchForm.classType = 2;
      }
      if (data.label == "噪声") {
        this.searchForm.classType = 3;
      }
      if (data.label == "土壤、底泥、固废、污泥和生活垃圾") {
        this.searchForm.classType = 4;
      }
      if (data.label == "样品制备") {
        this.searchForm.classType = 5;
      }
      if (data.label == "小型分析仪器") {
        this.searchForm.classType = 6;
      }
      if (data.label == "色谱仪") {
        this.searchForm.classType = 7;
      }
      if (data.label == "光谱仪") {
        this.searchForm.classType = 8;
      }
      if (data.label == "质谱仪") {
        this.searchForm.classType = 9;
      }
      List.getdeviceApplyList(this.searchForm).then(res => {
        console.log(res);
        if (res.code === 200) {
          this.mainAuxiliary = res.result.records;
        }
      });
    },
    // 移出
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      console.log(row);
      this.reset();
      this.getTreeselect();
      const userId = row.userId;
      getUserInfo({ userId: userId }).then(res => {
        this.form = res.result;
        if (res.result.image1 !== "") {
          this.previewImg = this.URL1 + res.result.avatarPath;
          this.isPreview = true;
        }

        console.log(this.previewImg);
        console.log(this.form.devices);
        this.getAge();
        this.getAgeData();
        this.tableData1 = this.form.devices;
        this.form.deviceIds = this.Selection;
        const checkRoleIdList = [];
        res.result.roles.map(item => {
          console.log(item);
          if (item !== null) {
            checkRoleIdList.push(item.id);
          }
        });
        this.$set(this.form, "roleIds", checkRoleIdList);

        const selectionData = [];
        res.result.devices.map(item => {
          if (item !== null) {
            selectionData.push(item.name);
          }
        });
        this.$set(this, "selectionData", selectionData);

        this.postId = res.result.postIds ? res.result.postIds[0] : "";
        this.$set(this.form, "postIds", res.result.postIds);

        this.open = true;
        this.title = "修改员工信息";
      });
    },
    /** 重置密码按钮操作 */
    handleResetPwd(row) {
      this.$confirm('是否确认重置用户为"' + row.empName + '"的密码?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(({ value }) => {
          resetOriganPassword(row.userId).then(response => {
            this.msgSuccess("重置成功");
          });
        })
        .catch(() => {});
    },
    /** 分配角色操作 */
    handleAuthRole: function(row) {
      const userId = row.userId;
      this.$router.push("/auth/role/" + userId);
    },
    /** 提交按钮 */
    submitForm: function() {
      if (this.form.isAppLogin === "1" && this.form.appRoles.length === 0) {
        this.msgErrot("小程序角色不能为空");
        return;
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.userId !== undefined) {
            updateUser(this.form).then(res => {
              if (res.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              } else {
                this.$notify({
                  title: "修改失败",
                  message: res.message,
                  type: "error"
                });
              }
            });
          } else {
            addUser(this.form).then(res => {
              if (res.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              } else {
                this.$notify({
                  title: "新增失败",
                  message: res.message,
                  type: "error"
                });
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const userIds = row.userId;
      this.$confirm(
        '是否确认注销用户为"' + row.empName + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(function() {
          return invalidUserByUserId(userIds);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("注销成功");
        })
        .catch(() => {});
    },
    /** 启用 */
    handleOnline(row) {
      const userIds = row.userId;
      this.$confirm("是否确认启用该账号", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return onlineUserByUserId(userIds);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("注销成功");
        })
        .catch(() => {});
    },
    switchChange() {
      if (this.form.isAppLogin === "0") this.form.appRoles = [];
    },

    handleDownload() {
      const url =
        this.$store.getters.sysBaseUrl + "/api/dataImport/exportEmployee";
      window.open(url);
    },

    downloadTem() {
      const url =
        this.$store.getters.sysBaseUrl +
        "/api/dataImport/downloadEmployeeExcel";
      window.open(url);
    },
    uploadChange(file) {
      if (file.status === "ready") return;
      if (file.status === "success") {
        const res = file.response || {};
        if (res && res.code === 200) {
          this.fileResult = file.response.result;
          this.$message({
            type: "success",
            message: file.response.message
          });
          this.handleQuery();
          this.uploadVisible = false;
        } else {
          this.$message.error("上传失败!");
          this.excelFileList = [];
        }
      } else {
        this.$message.error("上传失败!");
        this.excelFileList = [];
      }
    },
    handleUpload() {
      this.uploadVisible = true;
      this.excelFileList = [];
    }
  }
};
</script>

<style scoped lang="scss" type="text/scss">
.time-dot {
  text-align: center;
  justify-content: center;
  padding-top: 4px;
  position: relative;
  border-radius: 50%;
  background: #dfe4ed;
  height: 25px;
  width: 25px;
  left: -7px;
}
.clearfix {
  line-height: 40px;
  display: flex;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.install-title {
  display: flex;
  align-items: center;
  line-height: 30px;
  padding-left: 20px;
  color: rgb(12, 11, 11);
  background-color: #d7dae2;
  justify-content: flex-start;
  margin-bottom: 10px;
}
.delete {
  width: 10px;
  height: 10px;
  position: relative;
  top: -10px;
  cursor: pointer;
}
::v-deep .el-upload-list {
  width: 100px;
  display: flex;
  margin: 10px 10px;
}
::v-deep .el-upload-list > li {
  margin: 10px 10px;
}
::v-deep.el-upload-list__item {
  margin: 10px 10px;
}
::v-deep.el-upload-list--picture .el-upload-list__item {
  margin: 10px 10px !important;
}
.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
}

::v-deep.avatar-upload-preview {
  width: 400px;
  border-radius: 0%;
  height: 400px;
  > img {
    transform: translateX(0);
  }
}
.user-info-head:hover:after {
  content: "+";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 110px;
  border-radius: 50%;
}
/deep/.el-upload-dragger {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 100px;
  height: 37px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/.upload-dragger {
  background-color: #ffff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/deep/.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  background: #fff;
  border-radius: 2px;
  box-sizing: border-box;
  width: 80%;
}

.cropper-wrapper {
  //height: calc(100vh - 50px);
  .pre-box {
    button {
      width: 100px;
      margin-top: 15px;
    }
  }
}

.crop-dialog {
  .cropper-content {
    padding: 0 40px;

    .cropper {
      width: 700px;
      height: 700px;
    }
  }

  .action-box {
    padding: 25px 40px 0 40px;
    display: flex;
    justify-content: center;

    button {
      width: 80px;
      margin-right: 15px;
    }
  }

  .dialog-footer {
    button {
      width: 100px;
    }
  }
}
.el-divider--vertical {
  display: inline-block;
  width: 2px;
  height: 34em;
  margin: 0px 5px;
  vertical-align: middle;
  position: relative;
}
</style>
